<template>
  <div id="data-download-table" ref="scrollBox" class="main-content">
   <div v-if='loading'  v-loading="loading" :style="{ height: tableHeight + 'px' }"
    element-loading-text="数据加载中"
    element-loading-background="#fff"></div>
   <el-table v-else v-loading="loading"
    :data="tableData" style="width: 100%"
    :height="tableHeight"
    >
      <el-table-column
       v-for="(item,index) in titleList"
        :key="index"
        :label="item.label"
        :prop="item.prop">
         <template  slot-scope="scope">
       <div v-html='scope.row[item.prop]'>{{scope.row[item.prop]}}</div>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name:'ReportPageContent',
    props:{
     childParams:{
      type:Array,
      required: true
     },
     tableHeight:{
      type:String,
      required: true
     },
     loading:{
      type:String,
      required: true
     },
   },
    data(){
      return {
       titleList:[],//表格头部
       tableData:[],//表格数据
       tableHeight:0,
       loading:true
      }
    },
    watch:{
      tableHeight:{
        handler(a){
          this.tableHeight= a
        },
      },
      loading:{
        handler(flag){
          this.loading= flag
        },
      },
      childParams:{
        deep:true,
        handler:function(newV){
          this.titleList = JSON.parse(newV.titleList);
          this.getQueryTableData(newV)
        }
      },
    },
    created() {
      // 给当前页面添加onClick事件
      window.gotoGis = form => {
        this.$emit('gotoGis', form)
      }
    },
    methods:{
      /**
     * 获取表格数据
     */
      getQueryTableData(newV){
        if(!newV)return false
        delete newV.titleList
        const that=this;
        this.api.queryTableData(newV).then(data => {
          if(data.data&&data.data.length){
            this.tableData=data.data;
          }
          this.$emit('setLoading', false)
          this.loading = false;
        })
      },
  }
  }
</script>

<style lang="scss" scoped>
#data-download-table{
  padding:5px 10px ;
    .el-table th.el-table__cell{
        background: #4b71b0;
    }
    .main-content .el-table--border:after, .main-content .el-table--group:after, .main-content .el-table:before,
    .el-table--border:after, .el-table--group:after, .el-table:before{
      background-color:transparent !important;
    }
}
</style>

